<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>### v-for指令

            **语法:**
            <标签 v-for="元素 in 数据源"></标签>

            数据源:  数组,
            元素:  数组中的一个元素,

            数据源:  对象
            元素:  对象中的一个属性名

            <标签 v-for="(元素,索引|键) in 数据源"></标签>
            当数据源是数组时,  ()的第二个参数值索引
            当数据源是对象时,  ()的第二个参数值键

            <标签 v-for="(元素,键,索引) in 对象"></标签>

            **作用:**
            基于数据源多次循环达到多次渲染当前元素</h2>
        <h1>循环数组</h1>
        <ul>
            <li v-for="hobby in hobbys">{{hobby}}</li>
        </ul>
        <h1>遍历对象  拿到的是属性值</h1>
        <ul>
            <li v-for="value in student">{{value}}</li>
        </ul>
        <h1>带索引循环数组</h1>
        <ul>
            <li v-for="(hobby,index) in hobbys">{{index+1}}-----{{hobby}}</li>
        </ul>
        <h1>带键遍历对象</h1>
        <ul>
            <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
        </ul>
    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                hobbys : ["爬山","游泳","打豆豆","睡觉"],
                student : {
                    name: "小毛",
                    age: 29,
                    sex: "男",
                },
            },
            methods:{

            }

        })
    </script>
</html>